<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		font-family: "微软雅黑", sans-serif;
		list-style: none;
		text-decoration: none;
	}
	html,body {
		width: 100%;
		height: 100%;
	}
	body {
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #0d0f1b;
		overflow: hidden;
	}
	ul {
		position: relative;
		display: flex;
		flex-direction: column;
	}
	ul li::before {
		content: attr(data-text);
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: #fff;
		font-size: 6em;
		font-weight: 700;
		pointer-events: none; /* 使元素能看到，但摸不着 */
		letter-spacing: 20px;
		opacity: 0;
		transition: 0.5s;
		white-space: nowrap;
	}
	ul li:hover:before {
		opacity: 0.1;
		letter-spacing: 0;
	}
	ul li a {
		position: relative;
		display: inline-block;
		padding: 6px 15px;
		background-color: #2196f3;
		color: #fff;
		text-transform: uppercase; /* uppercase：文本转成大写  lowercase：小写 capitalize首字母大写*/ 
		letter-spacing: 2px;
		overflow: hidden;s:  ;
		transition: 0.5s;
		z-index: 1;
	}
	ul:hover li a {
		opacity: 0;
	}
	ul li a:hover {
		transform: scale(1.4);
		z-index: 100;
		background-color: #ff3f81;
		opacity: 1;
	}
	ul li a:before {
		content: '';
		position: absolute;
		top: 0;
		/*left: 0;*/
		left: -100px; 
		width: 80%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
		transform: skew(35deg);
	}
	ul li a:hover:before {
		left: calc(100% + 100px);
		transition: 0.5s;
		transition-delay: 0.2s;
	}
	</style>
</head>
<body>
	<ul>
		<li data-text="HOME"><a href="#">首页</a></li>
		<li data-text="ABOUT"><a href="#">关于</a></li>
		<li data-text="PRODUCT"><a href="#">产品</a></li>
		<li data-text="PROFILE"><a href="#">简介</a></li>
		<li data-text="CONTACT"><a href="#">联系</a></li>
	</ul>
</body>
</html>